<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
    <title>企汇网注册面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .top {
            width: 100%;
        }

        .share {
            width: 1200px;
            margin: 0 auto;
        }

        .clearfix {
            content: "";
            display: block;
            clear: both;
        }

        .top_nav {
            font-size: 12px;
            padding: 6px 0;
            line-height: 19px;
            height: 29px;
            border-bottom: 1px solid #e8e8e8;
            background-color: #f1f1f1;
        }

        .top_bottom {
            background-color: #fff;
        }

        .top_nav .nav-left {
            float: left;

        }

        .nav-left a {
            float: left;
            color: #666;
            text-align: center;
            text-decoration: none;
            padding: 0 8px;
            border-right: 1px solid #999;
            margin-right: 8px;
            position: relative;
        }

        .nav-right {
            float: right;

        }

        .nav-right a {
            float: left;
            color: #666;
            text-align: center;
            text-decoration: none;
            padding: 0 8px;
            border-right: 1px solid #999;
            margin-right: 8px;
            position: relative;
        }

        .top_nav .up {
            position: relative;
            top: -3px;
        }

        .top_nav a .drop {
            background-color: #fff;
            border: 1px solid #999;
            text-align: center;
            position: absolute;
            padding: 5px;
            top: 19px;
            left: -9px;
            display: none;
            font-size: 12px;
            color: #666;
            line-height: 15px;
        }

        .top_nav a:hover .drop {
            display: block;
            border-top: none;
        }

        .top_nav a .drop p:hover {
            color: orangered;
        }

        .top_nav a::after {
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            background-image: url(./imgs/xia.png);
            background-repeat: no-repeat;
            position: relative;
            top: 6px;
            left: 2px;
        }

        .top_nav .no::after {
            display: none;
        }

        .top_nav a:hover {
            background-color: #fff;
            color: orangered;
        }

        .top_nav a:hover::after {
            transform: rotateX(180deg) translateY(7px);
        }

        .top_bottom .logo {
            margin-top: 12px;
            width: 208px;
            height: 80px;
            float: left;
        }

        .top_bottom .register {
            margin-top: 10px;
            height: 30px;
            line-height: 30px;
            font-size: 21px;
            float: left;
            padding: 25px 0 25px 30px;
        }

        .top_bottom .kefuphone {
            width: 192px;
            line-height: 25px;
            float: right;
            position: relative;
            padding: 12px 0 12px 50px;
        }

        .top_bottom .kefuphone i {
            position: absolute;
            top: 35px;
            left: -5px;
            display: inline-block;
            font-size: 40px;
            color: #a9a9a9;
        }
        .formTop{
            width: 1100px;
            height: 90px;
            padding-top: 60px;
            margin: 0 auto
        }
        .formTop .show_step{
            width: 1100px;
            height: 30px;
            overflow: hidden;
        }
        .show_step dd{
            width: 366px;
            float: left;
            line-height: 30px;
            text-align: center;
        }
        .on{
            color: #dc2a49;
        }
        .lineimg{
            width: 100%;
            height: 20px;
            margin: 20px auto;
            background: url(./imgs/rg_line.png) no-repeat;
            background-position: center top;
        }
        .inputlist{
            margin-top: 110px;
            width: 100%;
            background-color: #f8f8f8;
        }
        .ipt-cont{
            width: 1000px;
            margin: 60px auto;
            background-color: #fff;
            font-size: 14px;
            text-align: center;
        }
        .ipt-cont .phone-num{
            width: 745px;
            margin: 20px auto;
            position: relative;
        }
        .inputlist .bf-text{
            float: left;
            width: 219px;
            height: 37px;
            color: #4d4d4d;
            line-height: 37px;
            text-align: right;
            position: relative;
        }
        .phone-num input.phone{
            width: 268px;
            height: 37px;
            font-size: 12px;
            background-color: #fff;
            border: 1px solid #e5e6e7;
            border-radius: 2px;
            padding: 0 10px;
            color: #999;
            float: left;
            margin-left: 10px;
        }
        .phone-num input.yz-btn{
            width: 244px;
            padding: 0 46px 0 46px;
            height: 42px;
            font-size: 14px;
            color: #666;
            
            text-align: left;
            float: left;
            margin-left: 10px;
        }
        .bf-text div{
            display: inline-block;
            border-radius: 50%;
        }
        .bf-text .wq{
            width: 35px;
            height: 35px;
            background-color: rgb(120, 120, 230);
            border: 1px solid rgb(0, 195, 255);
            position: absolute;
            right: -50px;
            top: 4px;
            text-align: center;
        }
        .bf-text .wq .nq{
            width: 15px;
            height: 15px;
            background-color: rgb(0, 183, 255);
        }
        .phone-num .tb{
            width: 40px;
            height: 40px;
            position: absolute;
            top: 1px;
            right: 273px;
        }
        .phone-num input.yz-inp{
            width: 140px;
            height: 37px;
            float: left;
            margin-left: 10px;
        }
        .phone-num input.dx-btn{
            width: 100px;
            height: 34px;
            font-size: 12px;
            float: left;
            margin-left: 10px;
            color: #fff;
            border: 2px solid #999;
            background-color: #999;
            text-align: center;
            border-radius: 5px;
        }
        .ipt-cont .serve-text{
            display: block;
            width: 745px;
            margin: 20px auto;
            font-size: 14px;
            color: #000;
            text-align: left;
            margin-left: 360px;
        }
        .serve-text span.code{
            display: inline-block;
            width: 15px;
            height: 15px;
            border: 2px solid #a9a9a9;
            position: relative;
            top: 2px;
            left: -3px;
        }
        .serve-text:hover span.code{
            border: 2px solid #4d4d4d;
        }
        .ipt-cont .nest{
            width: 745px;
            margin: 20px auto;
            text-align: center;
            padding-top: 25px;
            border-top: 1px solid #a9a9a9;
        }
        .nest input{
            width: 48px;
            height: 25.6px;
            font-size: 16px;
            padding: 10px 90px;
            background-color: #a9a9a9;
            color: #fff;
            box-sizing: content-box;
            position: relative;
            left: -30px;
            border-radius: 5px;
        }
        /* 页尾 */
        .footer{
            width: 100%;
            min-width: 1200px;
            padding:40px 0;
            background: #1d1d1d;
            margin-top: 20px;
        }
        
        .footer  a{
            font-size: 14px !important;
            color: #a0a0a0;
        }
        .footer  a:hover{
            color: #fff !important;
            text-decoration: none;
        }
       
       .footerSL{
            text-align: center;
       }
       .footerSL a{
           display: inline-block;
           color: #6e6e6e;
           padding: 0 12px;
           border-right: 1px solid #6e6e6e;
       }
       .footerSL a.qq,.footerSL a.wb{
           border: none;
       }
       .footerSL a.wb::after{
           content: "";
           display: inline-block;
           width: 18px;
           height: 18px;
           background-image: url(./imgs/sprite_global.png);
           background-position: 0 -18px;
           background-repeat: no-repeat;
           position: relative;
           top: 5px;
           left: 4px;
       }
       .footerSL a.qq::after{
           content: "";
           display: inline-block;
           width: 18px;
           height: 18px;
           background-image: url(./imgs/sprite_global.png);
           background-position: 0 0;
           background-repeat: no-repeat;
           position: relative;
           top: 5px;
           left: 4px;
       }
       .footer .footerrig{
           width: 1200px;
           padding-top: 10px;
           color: #6e6e6e;
           font-size: 14px;
           text-align: center;
           margin: 15px;
       }
       .footerrig span{
           color: #999;
       }
       .FBimg{
           margin-top: 10px;
           text-align: center;
       }
       .FBimg .iso{
           width: 88px;
           height: 31px;
           display: inline-block;
           background-image: url(./imgs/copyright.png);
           opacity: 0.6;
           margin-right: 4px;
       }
       .FBimg .iso:hover{
           opacity: 1;
       }
       
       
    </style>
</head>

<body>
    <div class="top">
        <div class="top_nav">
            <div class="share clearfix">
                <div class="nav-left">
                    <a class="up" href=""><i class="icon iconfont icon-shouji" style="color:#dc2a49;"></i> 手机站
                        <div class="drop">
                            <ul>
                                <li style="width: 150px;height: 178px;border: 1px solid #999;">
                                    <div style="width: 122px;height: 122px;margin: 10px auto;"><img
                                            src="./imgs/oneCode.jpg" alt=""></div>
                                    <p style="font-size: 14px;color: #666;">手机站</p>
                                </li>
                                <li style="width: 150px;height: 178px;border: 1px solid #999;">
                                    <div style="width: 122px;height: 122px;margin: 10px auto;"><img
                                            src="./imgs/xiaochengxu.jpg" alt=""></div>
                                    <p style="font-size: 14px;color: #666;">小程序</p>
                                </li>
                            </ul>
                        </div>
                    </a>
                    <span style="float: left;color: #666;">欢迎来到企汇网</span>
                    <a class="no up" style="margin-left: 12px;" href=""><i class="icon iconfont icon-yonghu"
                            style="color:#dc2a49;"></i> 登录</a>
                    <a class="no" style="border: none;" href="">免费注册</a>
                </div>
                <div class="nav-right">
                    <a class="no" href="">企汇网首页</a>
                    <a href="">收藏夹
                        <div class="drop" style="width: 113%;">
                            <p>收藏的店铺</p>
                            <p>收藏的产品</p>

                        </div>
                    </a>
                    <a href="">我是采购商
                        <div class="drop" style="width: 110%;">
                            <p>采购商中心</p>
                            <p>发布采购单</p>
                            <p>采购管理</p>
                        </div>
                    </a>
                    <a href="">我是供应商
                        <div class="drop" style="width: 110%;">
                            <p>供应商中心</p>
                            <p>发布供应单</p>
                            <p>产品管理</p>
                            <p>商铺管理</p>
                        </div>
                    </a>
                    <a class="no" href="">企汇管家</a>
                    <a href="">企汇服务
                        <div class="drop" style="width: 250%;padding-left: 5px; text-align: left;">
                            <h5 style="font-size: 16px;font-weight: bold;">热门服务</h5>
                            <p style="width:85px;float:left;">标王</p>
                            <p style="width:85px;float:left;">黄金展位</p>
                            <p style="width:85px;float:left;">热门推荐广告位</p>
                            <p style="width:85px;float:left;">图片空间</p>
                            <p style="width:85px;float:left;">信息包</p>
                            <p style="width:85px;float:left;">企汇全铺</p>
                            <p style="width:85px;float:left;">全铺装修</p>
                            <p style="width:85px;float:left;">更多服务</p>
                        </div>
                    </a>
                    <a href="">客服中心
                        <div class="drop" style="width: 110%;">
                            <p>常见问题</p>
                            <p>在线客服</p>

                        </div>
                    </a>
                    <a class="up" style="border: none;" href=""><i class="icon iconfont icon-liebiao"
                            style="color:#dc2a49;"></i> 网站导航
                        <div class="drop" style="width: 280%;padding-left: 5px; text-align: left;">
                            <h5 style="font-size: 16px;font-weight: bold;">特色服务</h5>
                            <p style="width:50px;float:left;margin-right: 4px;">首页</p>
                            <p style="width:50px;float:left;margin-right: 4px;">企汇管家</p>
                            <p style="width:50px;float:left;margin-right: 4px;">企汇云信</p>
                            <p style="width:50px;float:left;margin-right: 4px;">企业库</p>
                            <p style="width:50px;float:left;margin-right: 4px;">产品库</p>
                            <p style="width:50px;float:left;margin-right: 4px;">手机站</p>
                            <p style="width:50px;float:left;margin-right: 4px;">搜索</p>
                            <p style="width:60px;float:left;margin-right: 4px;">企汇软文通</p>
                            <p style="width:60px;float:left;margin-right: 4px;">百度爱采购</p>
                            <p style="width:60px;float:left;margin-right: 4px;">企业直通车</p>

                            <h5 style="font-size: 16px;font-weight: bold;width: 80px;">采购服务</h5>
                            <p style="width:50px;float:left;margin-right: 4px;">采购中心</p>
                            <p style="width:70px;float:left;margin-right: 4px;">发布采购单</p>

                            <h5 style="font-size: 16px;font-weight: bold;width: 80px;">行业市场</h5>
                            <p style="width:50px;float:left;margin-right: 4px;">建材频道</p>
                            <p style="width:50px;float:left;margin-right: 4px;">农频道</p>
                            <p style="width:50px;float:left;margin-right: 4px;">机械频道</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="top_bottom">
            <div class="share">
                <div class="logo"><a href=""><img style="width: 100%;height: 100%;" src="./imgs/logo.png" alt=""></a>
                </div>
                <div class="register">会员注册</div>
                <div class="kefuphone">
                    <i class="icon iconfont icon-dianhuajianpantianchong"></i>
                    <h3 style="font-size: 14px;color: #666;text-align: left;font-weight: normal;">客服电话</h3>
                    <p style="font-size:26px;color:#dc2a49;font-family: Microsoft YaHei;">400-6677-369</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 验证手机号 -->
    <div class="formTop clearfix">
        <dl class="show_step clearfix">
            <dd class="on">验证手机号</dd>
            <dd>填写账号信息</dd>
            <dd>注册成功</dd>
        </dl>
        <div class="lineimg"></div>
    </div>
    <div class="inputlist">
        <div class="ipt-cont">
            <div class="phone-num clearfix bm">
                <span class="bf-text"><sup style="color: crimson;font-size: 18px;">*</sup> 请输入手机号</span><input class="phone" type="text" placeholder="请输入手机号码">
            </div>
            <div class="phone-num clearfix">
                <span class="bf-text" style="line-height: 42px;"><sup style="color: crimson;font-size: 18px;">*</sup>验证码 <div class="wq"><div class="nq"></div></div></span><input class="yz-btn" type="button" value="点击按钮进行验证">
                <div class="tb"><img style="width: 100%;height: 100%;" src="./imgs/icon-yz.png" alt=""></div>
            </div>
            <div class="phone-num clearfix ">
                <span class="bf-text"><sup style="color: crimson;font-size: 18px;">*</sup> 短信验证码</span><input class="yz-inp" type="text" placeholder="请输入验证码">
                <input class="dx-btn" type="button" value="获取短信验证码">
            </div>
            <p class="serve-text"><span class="code"></span>我已阅读并同意<em style="color: #dc2a49;">《企汇网服务条款》</em></p>
            <div class="nest"><input type="button" value="下一步"></div>
        </div>
    </div>
    <!-- 页尾 -->
    <div class="footer">
        <div class="share">
            <div class="footerSL" style="padding-bottom: 5px;padding-top: 10px;">
                <a href="">网站首页</a><a href="">关于我们</a><a href="">联系我们</a><a href="">使用协议</a><a href="">隐私版权</a><a href="">产品资讯</a><a href="">产品动态</a><a href="">维权通道</a><a href="">网站导航</a><a style="border-right: none;" href="">用户反馈</a>
                </a>
            </div>
            <div class="footerrig footerSL">
                客服咨询热线：400-6677-369(免长途费) 工作时间：900-18:00(周一至周五)<a class="qq" href="">在线客服</a><a class="wb" href="">关注我们
            </div>
            <div class="footerrig">
                Copyright 2008-2018 河南企汇网信息技术股份有限公司  保留所有权利    经营许可证编号：<span>豫B2-20140075-18</span><span>豫公网安备 41019702002055号</span>
            </div>
            <div class="FBimg clearfix">
                <span class="iso i1" style="background-position: 0 0;"></span>
                <span class="iso i2" style="background-position: -92px 0;width: 87px;"></span>
                <span class="iso i3" style="background-position: -182px 0;width: 87px;"></span>
                <span class="iso i4" style="background-position: -272px 0;width: 107px;"></span>
                <span class="iso i5" style="background-position: -383px 0;"></span>
                <span class="iso i6" style="background-position: -474px 0;width: 95px;"></span>
              
            </div>
        </div>
    </div>
</body>

</html>